<template>
  <view class="content" :style="{ paddingTop: H_content + 10 + 'px', paddingBottom: '50px' }">
    <view class="title-area" :style="{ height: H_content + 10 + 'px' }">
      <view :style="{ height: H_top + 'px' }"></view>
      <view class="nav-bar-title" :style="{ fontSize: '36rpx;', height: H_height + 'px', lineHeight: H_height + 'px', textAlign: 'center', color: '#000' }">
        <image @click="search" style="margin-left: 30rpx; height: 50rpx;width: 50rpx;" src="/static/lzl/Search@2x.png" mode=""></image>
        <!-- <view style="margin-left: 50%;transform: translateX(-100%);font-size: 32rpx;">亚麻艺术家</view> -->
        <view style="margin-left: 50%;transform: translateX(-85%);display: flex;align-items: center; font-size: 32rpx;">
          <image src="/static/lzl/439eab05-488f-43e7-992e-f94f405aeb98 1@2x.png" style="width: 218rpx;height: 64rpx;" mode=""></image>
        </view>
      </view>
    </view>
    <tabBar :top="H_content" numBer="2"></tabBar>
    <!-- 下方的内容 -->
    <view class="body">
      <view class="left">
        <view class="left_lei" v-for="(item, index) in list" :key="index" @click="qiehuan(item, index)">
          <view class="box">
            <view :class="{ left_box: index == act }"></view>
            <view class="tit" :class="{ active: index == act }">{{ item.name }}</view>
          </view>
        </view>
      </view>
      <view class="right" v-if="itemList">
        <view class="rug_shop" v-for="(item, index) in itemList" :key="index" @click="fenlei(item)">
          <image :src="item.image" style="width: 224rpx;height: 312rpx;" mode=""></image>
          <view class="text" style="text-align: center;margin-top: 15rpx;font-size: 28rpx;color: #322922">{{ item.name }}</view>
        </view>
      </view>
      <view class="" v-else>暂无商品</view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['H_top', 'H_height', 'H_content'])
  },
  data() {
    return {
      title: 'Hello',
      act: 0,
      list: [],
      itemList: []
    };
  },
  onHide() {
    console.log(7777777777777777777777777777777777);
  },
  onShow() {
    this.act = 0;
    this.init();
  },
  onLoad() {},
  methods: {
    // 点击切换
    qiehuan(item, index) {
      this.act = index;
      this.itemList = item.children;
      // console.log(item);
    },
    async init() {
      let n = await this.$api.category({ id: 1 });
      this.list = n.data.children;
      this.itemList = n.data.children[0].children;
    },
    search() {
      uni.navigateTo({
        url: '/pages/search/searchSon/searchSon'
      });
    },
    fenlei(item) {
      // 点击分类;
      uni.navigateTo({
        url: '/pages/search/classification/classification?item=' + JSON.stringify(item)
      });
    },
    addess() {
      uni.navigateTo({
        url: '/pages/address/address'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.body {
  // height: 1218rpx;
  height: 80vh;
  width: 100%;
  padding: 20rpx;
  display: flex;
  .left {
    width: 182rpx;
    .left_lei {
      position: relative;
      .left_box {
        position: absolute;
        width: 4rpx;
        height: 28rpx;
        background-color: #c3b27f;
        top: 9rpx;
        left: 10rpx;
      }
      // color: #0a0a09;
      .tit {
        text-align: center;
        margin-bottom: 64rpx;
        font-size: 32rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        &.active {
          color: #c3b27f;
        }
      }
    }
  }
  .right {
    // height: 1218rpx;
    height: 80vh;
    // overflow: hidden;
    overflow-y: auto;
    width: 516rpx;
    padding: 20rpx;
    background-color: #f2f1f1;
    // display: flex;
    // justify-content: space-between;
    // flex-wrap: wrap;
    .rug_shop {
      height: 400rpx;
      width: 224rpx;
      float: left;
      &:nth-child(2n) {
        margin-left: 25rpx;
      }
      // background-color: pink;
    }
  }
}

.title-area {
  width: 100%;
  background-color: #fff;
  color: #000;
  position: fixed;
  z-index: 9999999;
  top: 0;
  left: 0;
}
.nav-bar-title {
  display: flex;
  // justify-content: ;
  align-items: center;
}
.tit {
  font-size: 32rpx;
  font-family: 'DingTalk JinBuTi-Regular, DingTalk JinBuTi';
  font-weight: 400;
  color: #322922;
}
</style>
